import React from "react";
import "../../css/zh/Shi.css"; // 引入样式文件

interface NewsItem {
  title: string;
  imageUrl: string;
  link: string;
  category: string;
}

const NewsAndEvents: React.FC = () => {
  const newsData: NewsItem[] = [
    {
      title: "Obuda大学：拥抱Wi-Fi 7，打造高品质万兆智慧校园网",
      imageUrl:
        "https://www-file.huawei.com/-/media/corp2020/home/box/14/wifi-7-idc-award-825-v2.jpg",
      link: "https://www.huawei.com/cn/",
      category: "成功案例",
    },
    {
      title: "新通话，让每一次连接超越想象",
      imageUrl:
        "https://www-file.huawei.com/-/media/corp2020/home/box/14/wifi-7-idc-award-825-v2.jpg",
      link: "https://www.huawei.com/cn/",
      category: "创新技术",
    },
  ];

  return (
    <div className="news-and-events-container">
      <div className="news-list">
        {newsData.map((item, index) => (
          <div className="news-item" key={index}>
            <img src={item.imageUrl} alt={item.title} className="news-image" />
            <div className="news-content">
              <p className="news-category">{item.category}</p>
              <h3 className="news-title">
                <a href={item.link} target="_blank" rel="noopener noreferrer">
                  {item.title}
                </a>
              </h3>
            </div>
          </div>
        ))}
        <div
          style={{
            height: "30rem",
            width: "24rem",
            overflow: "auto",
            marginLeft: "10px",
          }}
        >
          <div
            style={{
              width: "360px",
              fontSize: "16px",
              color: "gray",
              marginTop: "10px",
            }}
          >
            <p style={{ fontSize: "18px", color: "#000", fontWeight: "bold" }}>
              华为斩获九项Lightwave+BTR光通信年度创新大奖，创历史新高
            </p>
            <p>2025年03月31</p>
          </div>
          <div
            style={{
              width: "360px",
              fontSize: "16px",
              color: "gray",
              marginTop: "10px",
            }}
          >
            <p style={{ fontSize: "18px", color: "#000", fontWeight: "bold" }}>
              关于公司轮值董事长的当值公告
            </p>
            <p>2025年03月31</p>
          </div>
          <div
            style={{
              width: "360px",
              fontSize: "16px",
              color: "gray",
              marginTop: "10px",
            }}
          >
            <p style={{ fontSize: "18px", color: "#000", fontWeight: "bold" }}>
              华为发布2024年年度报告:经营结果符合 预期
            </p>
            <p>2025年03月31</p>
          </div>
          <div
            style={{
              width: "360px",
              fontSize: "16px",
              color: "gray",
              marginTop: "10px",
            }}
          >
            <p style={{ fontSize: "18px", color: "#000", fontWeight: "bold" }}>
              华为斩获九项Lightwave+BTR光通信年度创新大奖，创历史新高
            </p>
            <p>2025年03月31</p>
          </div>
          <div
            style={{
              width: "360px",
              fontSize: "16px",
              color: "gray",
              marginTop: "10px",
            }}
          >
            <p style={{ fontSize: "18px", color: "#000", fontWeight: "bold" }}>
              华为斩获九项Lightwave+BTR光通信年度创新大奖，创历史新高
            </p>
            <p>2025年03月31</p>
          </div>
          <div
            style={{
              width: "360px",
              fontSize: "16px",
              color: "gray",
              marginTop: "10px",
            }}
          >
            <p style={{ fontSize: "18px", color: "#000", fontWeight: "bold" }}>
              华为斩获九项Lightwave+BTR光通信年度创新大奖，创历史新高
            </p>
            <p>2025年03月31</p>
          </div>
          <div
            style={{
              width: "360px",
              fontSize: "16px",
              color: "gray",
              marginTop: "10px",
            }}
          >
            <p style={{ fontSize: "18px", color: "#000", fontWeight: "bold" }}>
              华为斩获九项Lightwave+BTR光通信年度创新大奖，创历史新高
            </p>
            <p>2025年03月31</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NewsAndEvents;
